<template>
  <div>
    <el-tree
      :data="data"
      node-key="catId"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    >
      <div
        class="custom-tree-node"
        slot-scope="{ data }"
      >
        <div>{{ data.name }}</div>
      </div>
    </el-tree>
  </div>
</template>
<script>
export default {
  data () {
    const data = []
    return {
      data: JSON.parse(JSON.stringify(data))
    }
  },
  methods: {
    // 获取分类层级树
    getListTree () {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
        // params: this.$http.adornParams({

        // })
      }).then(({ data }) => {
        this.data = data.data
      })
    },
    handleNodeClick (data, node, component) {
      this.$emit('node_click', data, node, component)
    }
  },
  created () {
    this.getListTree()
  }
}
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #66696b;
  padding-right: 10px;
  padding-left: 10px;
  height: 40px;
  background-color: #f3f3f4;
}
.el-tree-node__content {
  height: 50px;
  line-height: 50px;
  /* width: 800px; */
}
</style>